<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
li{width:100px; height:100px; background-color:red; list-style:none; position:absolute; top:50px; font-size:40px;text-align:center;line-height:100px; font-weight:bold; border:2px solid #333;}
</style>
<script>
window.onload = function (){
	var oInp = document.getElementsByTagName('input')[0];
	var oUl = document.getElementsByTagName('ul')[0];
	var aLi = document.getElementsByTagName('li');
	var arr = ['red','blue','yellow','green'];
	var onOff = true;
	var str = '';
	var num = 0;
	
	oInp.onclick = function (){
		if (onOff){
			for (var i=0;i<10;i++){
				str += '<li style="background-color:'+ arr[i%4] +'">'+ (i+1) +'</li>';
			}
			oUl.innerHTML = str;
		}
		for (var i=0;i<aLi.length;i++){				//这句话必须放在生成Li的步骤外面
			aLi[i].style.left = 80+120*i+'px';
		}
		onOff = false;
	}
}
</script>
</head>
<body>
<input type="button" value="生成10个Li">
<ul></ul>
</body>
</html>
